<template>
  <div class="common-left-bg">
    <dv-border-box-7>
        <div class="common-title">教师组卷情况</div>
        <el-row :gutter="20">
          <el-col :span="12" class="">
            <dv-charts :option="option" style="widht: 200px; height:130px;" />
            <p class="zujian-title"><span style="color: #1ed3e5"><i class="el-icon-s-help" ></i></span>周组卷</p>

          </el-col>
          <el-col :span="12" class="">
            <dv-charts :option="option1" style="widht: 200px; height:130px;" />
            <p class="zujian-title"><span style="color: #e690d1"><i class="el-icon-s-help" ></i></span>月组卷</p>
          </el-col>
        </el-row>

        
    </dv-border-box-7>
  </div>
</template>

<script>
export default {
  name: 'zujuan',
  data () {
    return {
      option: {
        series: [
        {
          
          type: 'gauge',
          startAngle: -Math.PI / 2,
          endAngle: Math.PI * 1.5,
          arcLineWidth: 5,
          data: [
            { name: 'itemA', value: 30, gradient: ['#03c2fd', '#1ed3e5', '#2fded6'] }
          ],
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          pointer: {
            show: false
          },
          dataItemStyle: {
            lineCap: 'round'
          },
          details: {
            show: true,
            formatter: '{value}套',
            style: {
                fill: '#03c2fd',
                fontSize: 25
            }
          }
        }
      ]
      },
      option1: {
        series: [
        {
          
          type: 'gauge',
          startAngle: -Math.PI / 2,
          endAngle: Math.PI * 1.5,
          arcLineWidth: 5,
          data: [
            { name: 'itemA', value: 79, gradient: ['#e7bcf3', '#e690d1', '#fb7293'] }
          ],
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          },
          pointer: {
            show: false
          },
          dataItemStyle: {
            lineCap: 'round'
          },
          details: {
            show: true,
            formatter: '{value}套',
            style: {
                fill: '#e690d1',
                fontSize: 25
            }
          }
        }
      ]
      }

    }
  }
};
</script>

<style lang="less">
.zujian-title{  text-align: center;color: #ccc; margin:0;padding:0px; line-height:30px; height: 30px; }
</style>
